﻿/*
    base all
    2016-9-21 10:27:21
    andy.niu@outlook.com
*/
html{ font-family: 'PingFang SC','Helvetica Neue',Helvetica,sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0;color:#333;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
a{background-color:transparent}
a:active,a:hover{outline:0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:700}
dfn{font-style:italic}
h1{margin:.67em 0;font-size:2em}
mark{background:#ff0;color:#000}
small{font-size:80%}
sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}
sup{top:-.5em}
sub{bottom:-.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:1em 40px}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
pre{overflow:auto}
code,kbd,pre,samp{font-size:1em;font-family:monospace,monospace}
button,input,optgroup,select,textarea{margin:0;color:inherit;}
button{overflow:visible}
button,select{text-transform:none}
button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
input{line-height:normal}
input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}
input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
fieldset{margin:0 2px;padding:.35em .625em .75em;border:1px solid silver}
legend{padding:0;border:0}
textarea{overflow:auto}
optgroup{font-weight:700}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:0}
.hidden,[hidden]{display:none!important}

html > body { font-size: 14px; }
html, body { height:100%; }
div, span, a, header { -webkit-tap-highlight-color: rgba(255,255,255,0); }
* {  -webkit-tap-highlight-color: rgba(0,0,0,0); -ms-tap-highlight-color: rgba(0,0,0,0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
a { color: #333; text-decoration:underline; }
a.red,.red { color:#c60328; }
a:hover { }
a:active { color:#333;text-decoration:none; }
a.a-primary {color:#1682f5; }
a, a:link, a:visited, a:hover, a:active { text-decoration: none; }

.max-width,.max-img, .max-img img { width:100%; margin:0 auto;vertical-align:middle; }
.max-img, .max-img img { display: block; vertical-align: middle; width: 100%; height: auto; margin: 0 auto;}
.max-img-640,.max-img-640 img { max-width:640px;width: 100%; }
.max-width-img {max-width:100%; }
.width-100 { width:100%; }
.pos-relative { position:relative;}


.center-block{display:block;margin-right:auto;margin-left:auto}
.pull-right{float:right!important}
.pull-left{float:left!important}
.hide{display:none!important}
.show{display:block!important}
.invisible{visibility:hidden}
.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}
.text-left{text-align:left}
.text-right{text-align:right}
.text-center{text-align:center}
.text-justify{text-align:justify}
.text-nowrap{white-space:nowrap}
.text-lowercase{text-transform:lowercase}
.text-uppercase{text-transform:uppercase}
.text-flex { display:flexbox; }
.block { display:block; }
.inlineblock { display:inline-block; }
.clearfix{display:block}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;line-height:0}
* html .clearfix{height:1%}
*+html .clearfix{zoom:1}

.h1{font-size:.64rem}
.h2{font-size:.5866666666666667rem}
.h3{font-size:.5333333333333333rem}
.h4{font-size:.48000000000000004rem}
.h5{font-size:.4266666666666667rem}
.h6{font-size:.37333333333333335rem}
.h7{font-size:.32rem}
.h1, .h2, .h3, .h4, .h5, .h6, .h7 {  margin:10px 0;}

.font-12{font-size:.32rem}
.font-14{font-size:.37333333333333335rem}
.font-16{font-size:.4266666666666667rem}
.font-18{font-size:.48000000000000004rem}
.font-20{font-size:.5333333333333333rem}
.font-22{font-size:.5866666666666667rem}
.font-24{font-size:.64rem}
.font-26{font-size:.6933333333333334rem}
.font-28{font-size:.7466666666666667rem}
.font-30{font-size:.8rem}
.font-32{font-size:.8533333333333334rem}
.font-34{font-size:.9066666666666667rem}
.font-36{font-size:.9600000000000001rem}

.color-000 { color:#000; }
.color-333 { color:#333 }
.color-747 { color:#747474 }
.color-666 { color:#666 }
.color-999 { color:#999 }
.color-fff { color:#FFF; }
.color-ccc { color:#CCC; }
.color-fff:active,.color-ccc:active {  color:#F5F5F5; }
.color-price { color:#ff4545;}
.bg-eee {  background-color:#EEE;}
.bg-fff { background-color:#FFF; }
.pos-relative { position:relative; }

.with-shadow { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
/* ============================================================
    flex：定义布局为盒模型
    flex-v：盒模型垂直布局
    flex-1：子元素占据剩余的空间
    flex-align-center：子元素垂直居中
    flex-pack-center：子元素水平居中
    flex-pack-justify：子元素两端对齐
    兼容性：ios 4+、android 2.3+、winphone8+

    <div class="flex flex-pack-justify">
        <div>模块一</div>
        <div>模块二</div>
        <div>模块三</div>
        <div>模块四</div>
    </div>
   ============================================================ */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

.container,.container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}
.row { margin-right: -15px; margin-left: -15px; }
.clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .row:after, .row:before { display: table; content: " "; }
.clearfix:after, .container-fluid:after, .container:after, .row:after { clear: both; }
.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left}
.col-md-12{width:100%}
.col-md-11{width:91.66666667%}
.col-md-10{width:83.33333333%}
.col-md-9{width:75%}
.col-md-8{width:66.66666667%}
.col-md-7{width:58.33333333%}
.col-md-6{width:50%}
.col-md-5{width:41.66666667%}
.col-md-4{width:33.33333333%}
.col-md-3{width:25%}
.col-md-2{width:16.66666667%}
.col-md-1{width:8.33333333%}

/* === Grid === */
.rows:after,.rows:before{content:" ";display:table}
.rows:after{clear:both}
.rows>[class*=col-]{float:left;margin-left:15px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.rows>[class*=col-]:first-child{margin-left:0}
.no-gutter.rows>[class*=col-]{margin-left:0}
.rows .col-100{width:100%;width:-webkit-calc((100% - 15px*0)/ 1);width:-moz-calc((100% - 15px*0)/ 1);width:calc((100% - 15px*0)/ 1)}
.rows.no-gutter .col-100{width:100%}
.rows .col-95{width:95%;width:-webkit-calc((100% - 15px*.05263157894736836)/ 1.0526315789473684);width:-moz-calc((100% - 15px*.05263157894736836)/ 1.0526315789473684);width:calc((100% - 15px*.05263157894736836)/ 1.0526315789473684)}
.rows.no-gutter .col-95{width:95%}
.rows .col-90{width:90%;width:-webkit-calc((100% - 15px*.11111111111111116)/ 1.1111111111111112);width:-moz-calc((100% - 15px*.11111111111111116)/ 1.1111111111111112);width:calc((100% - 15px*.11111111111111116)/ 1.1111111111111112)}
.rows.no-gutter .col-90{width:90%}
.rows .col-85{width:85%;width:-webkit-calc((100% - 15px*.17647058823529416)/ 1.1764705882352942);width:-moz-calc((100% - 15px*.17647058823529416)/ 1.1764705882352942);width:calc((100% - 15px*.17647058823529416)/ 1.1764705882352942)}
.rows.no-gutter .col-85{width:85%}
.rows .col-80{width:80%;width:-webkit-calc((100% - 15px*.25)/ 1.25);width:-moz-calc((100% - 15px*.25)/ 1.25);width:calc((100% - 15px*.25)/ 1.25)}
.rows.no-gutter .col-80{width:80%}
.rows .col-75{width:75%;width:-webkit-calc((100% - 15px*.33333333333333326)/ 1.3333333333333333);width:-moz-calc((100% - 15px*.33333333333333326)/ 1.3333333333333333);width:calc((100% - 15px*.33333333333333326)/ 1.3333333333333333)}
.rows.no-gutter .col-75{width:75%}
.rows .col-66{width:66.66666666666666%;width:-webkit-calc((100% - 15px*.5000000000000002)/ 1.5000000000000002);width:-moz-calc((100% - 15px*.5000000000000002)/ 1.5000000000000002);width:calc((100% - 15px*.5000000000000002)/ 1.5000000000000002)}
.rows.no-gutter .col-66{width:66.66666666666666%}
.rows .col-60{width:60%;width:-webkit-calc((100% - 15px*.6666666666666667)/ 1.6666666666666667);width:-moz-calc((100% - 15px*.6666666666666667)/ 1.6666666666666667);width:calc((100% - 15px*.6666666666666667)/ 1.6666666666666667)}
.rows.no-gutter .col-60{width:60%}
.rows .col-50{width:50%;width:-webkit-calc((100% - 15px*1)/ 2);width:-moz-calc((100% - 15px*1)/ 2);width:calc((100% - 15px*1)/ 2)}
.rows.no-gutter .col-50{width:50%}
.rows .col-40{width:40%;width:-webkit-calc((100% - 15px*1.5)/ 2.5);width:-moz-calc((100% - 15px*1.5)/ 2.5);width:calc((100% - 15px*1.5)/ 2.5)}
.rows.no-gutter .col-40{width:40%}
.rows .col-33{width:33.333333333333336%;width:-webkit-calc((100% - 15px*2)/ 3);width:-moz-calc((100% - 15px*2)/ 3);width:calc((100% - 15px*2)/ 3)}
.rows.no-gutter .col-33{width:33.333333333333336%}
.rows .col-25{width:25%;width:-webkit-calc((100% - 15px*3)/ 4);width:-moz-calc((100% - 15px*3)/ 4);width:calc((100% - 15px*3)/ 4)}
.rows.no-gutter .col-25{width:25%}
.rows .col-20{width:20%;width:-webkit-calc((100% - 15px*4)/ 5);width:-moz-calc((100% - 15px*4)/ 5);width:calc((100% - 15px*4)/ 5)}
.rows.no-gutter .col-20{width:20%}
.rows .col-15{width:15%;width:-webkit-calc((100% - 15px*5.666666666666667)/ 6.666666666666667);width:-moz-calc((100% - 15px*5.666666666666667)/ 6.666666666666667);width:calc((100% - 15px*5.666666666666667)/ 6.666666666666667)}
.rows.no-gutter .col-15{width:15%}
.rows .col-10{width:10%;width:-webkit-calc((100% - 15px*9)/ 10);width:-moz-calc((100% - 15px*9)/ 10);width:calc((100% - 15px*9)/ 10)}
.rows.no-gutter .col-10{width:10%}
.rows .col-5{width:5%;width:-webkit-calc((100% - 15px*19)/ 20);width:-moz-calc((100% - 15px*19)/ 20);width:calc((100% - 15px*19)/ 20)}
.rows.no-gutter .col-5{width:5%}



/*Ui Custom Alter*/
.ui-popup-screen{ opacity: .5;filter: Alpha(Opacity=50);top: 0;left: 0;right: 0;bottom: 1px;position:fixed;background-color: #252525; z-index:13; width:100%; height:100%; /*display:none;*/ }
.ui-popup-container{ background: #FFF; -webkit-animation-duration: 225ms;-webkit-animation-name: fadein;-moz-animation-duration: 225ms;-moz-animation-name: fadein;animation-duration: 225ms;animation-name: fadein; position:fixed; z-index:15; max-width:400px; width:80%;-webkit-box-shadow: 0 0 .625rem #999;box-shadow: 0 0 .625rem #999;}
.ui-popup-container .ui-popup-confirm{ border-top:1px solid #DDD; overflow:hidden; }
.ui-popup-container .ui-popup-confirm .ui-btn{ display:block; height:40px; line-height:40px; text-align:center; font-size:14px;color: #2683FF;padding:0;margin: 0; border:none;  }
.ui-popup-container .ui-pop-msg{ line-height:20px;padding: 10px 15px;}
.ui-pop-box{ border-radius: 3px;  }

.ui-alerts { position: fixed; top: 0; left: 0; z-index: 1000; display: none; width: 100%; height: 100%; }
.ui-alerts .ui-alerts-text { position: absolute; top: 50%; left: 50%; width: 70%; z-index: 1001; margin-top: -40px; margin-left: -35%; background-color: rgba(0,0,0,0.75); padding: 1.6em 1em; font-size: .875em; border-radius: 4px; line-height: 1.4em; }
.ui-alerts .ui-alerts-text div.text { color: #fff; text-align: center; font-size: 14px; }

footer.container { background-color:#F9F9F9}
.footer-nav { line-height:45px; border:1px solid #DDD; border-width:1px 0; text-align:center; }
.footer-nav a { color:#999; }
.footer-copyright { color:#BBB;margin: 30px 0 60px;}


@-webkit-keyframes a {
    0% { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); opacity: 0; }
    to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; }
}
@keyframes a {
    0% { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); opacity: 0; }
    to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; }
}
@-webkit-keyframes b {
    0% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; }
    to { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); opacity: 0; }
}
@keyframes b {
    0% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; }
    to { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); opacity: 0; }
}
                                                                                                                                                                                                                                                                                                                                                        @keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}
.page.slideIn{-webkit-animation:a .2s forwards;animation:a .2s forwards}
.page.slideOut{-webkit-animation:b .2s forwards;animation:b .2s forwards}
.ui-fade-in { -webkit-animation: fadeIn ease .3s forwards; animation: fadeIn ease .3s forwards; }
.page { overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; z-index: 1; }
.page.js_show { opacity: 1; }

/* Alert */
/* positioning shell for the actual modal */
.ui-dialog { }
.ui-dialog.js-show > .ui-alert { opacity: 1; visibility: visible; box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.035); }
.ui-dialog.js-show > .ui-alert { display: block; -webkit-transition-duration: 400ms; transition-duration: 400ms; -webkit-transform: translate3d(-50%,-50%,0) scale(1); transform: translate3d(-50%,-50%,0) scale(1); }
.ui-alert { border-radius: 10px; width: 280px; position: fixed; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0) scale(1.185); transform: translate3d(-50%, -50%, 0) scale(1.185); opacity: 0; /* visibility: hidden; */ /* I don't know why on iOS 4.3 visibility: visible is not work */ backface-visibility: hidden; background-color: #ECECEC; -webkit-transition: 300ms; transition: 300ms; z-index: 8; margin-top: -40px; }
.ui-alert-header { margin-top: 15px; }
.ui-alert-title { position: static; text-align: center; width: 100%; font-size: 18px; font-weight: 500; margin: 0; }
.ui-alert-body { margin: 15px; font-size: 14px; text-align: center; }
.ui-alert-footer { padding: 0; display: flex; position: relative; display: -webkit-flex; display: -webkit-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; }
.ui-alert-button { display: block; max-width: 280px; width: auto; margin: 0; padding: 8px 0px; border: 0; border-top: solid 1px #b5b5b5; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; position: relative; font-weight: 300; font-size: 18px; line-height: 30px; overflow: hidden; text-align: center; white-space: nowrap; vertical-align: middle; color: #167efb; background-color: rgba(255, 255, 255, 0.01); transition: background-color .1s ease-in-out; }
.ui-alert-button + .ui-alert-button { border-left: solid 1px #b5b5b5; }
/* Backdrop */
.js-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%;    background: rgba(0,0,0,.4); display: block;-webkit-transition: opacity 350ms; transition: opacity 350ms; z-index: 6;opacity:0 }
.js-backdrop.js-show { opacity: 1; }

#backtop { position:fixed;background:url(../Images/icon-list.png) no-repeat 0 100%;background-size:40px; height:40px; width:40px; display:block; right:20px; bottom:20px;opacity:0;z-index: 1; transition: opacity .3s ease-in-out; }
#backtop.active { opacity:1 ;}

/*loading*/
.loader-wrapper{position:fixed;top:0;left:0;z-index:1000;width:100%;height:100%;}
.loader-wrapper .loader{position:relative;top:50%;left:50%;display:block;margin:-75px 0 0 -75px;width:150px;height:150px;border:3px solid transparent;border-radius:50%;border-top-color:#0f79ec;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;}
.loader-wrapper .loader:before{position:absolute;top:5px;right:5px;bottom:5px;left:5px;border:3px solid transparent;border-radius:50%;content:"";border-top-color:#27b2fa;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite;}
.loader-wrapper .loader:after{position:absolute;top:15px;right:15px;bottom:15px;left:15px;border:3px solid transparent;border-radius:50%;content:"";border-top-color:#3accf3;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite;}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0); transform: rotate(0); -ms-transform: rotate(0); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); -ms-transform: rotate(360deg); }
}
@keyframes spin {
    0% { -webkit-transform: rotate(0); transform: rotate(0); -ms-transform: rotate(0); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); -ms-transform: rotate(360deg); }
}


/**/
.slideup-ani{ -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); -webkit-transition: -webkit-transform .2s cubic-bezier(0,0,.25,1); transition: transform .2s cubic-bezier(0,0,.25,1); }
.slideup-ani.active { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); top: 35%; }


.max-img, .max-img img { display: block; vertical-align: middle; width: 100%; height: auto; margin: 0 auto; }
.max-img-640,.max-img-640 img { max-width:640px;width: 100%; }
.max-width-img {max-width:100%; }
.width-100 { width:100%; }